<template>
  <div>
   
    <el-form :inline="true" class="demo-form-inline">
     
        
      <el-form-item label="车位编号:">
        <el-input placeholder="请输入车位编号" v-model="plateNumber"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchByCondition()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="pageInfo.list"
      border
      align="center"
      stripe
      ref="multipleTable"
      tooltip-effect="dark"
       :default-sort = "{prop: 'order_startime', order: 'descending'}"
      style="
        border-radius: 30px;
        width: 90%;
        margin: 0px auto;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      "
    >

          <el-table-column
        v-if="isIndex"
        show-overflow-tooltip
        align="center"
        :index="typeIndex"
        type="index"
        :width="100"

      >
        <template slot="header">
          <span class="firstCol">序号</span>
        </template>
      </el-table-column>
      <el-table-column label="车位展示" width="120">
         <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src="scope.row.stall.photo" alt="" style="width:300px;height:300px">
              <img slot="reference" :src="scope.row.stall.photo" style="width: 100px;height: 100px">
            </el-popover>
        </template>
        <!-- <template slot-scope="scope">
          <el-image style="width: 100px; height: 80px" :src="scope.row.stall.photo">
          </el-image>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="stall.stall_size"
        label="车位大小"
        width="100"
      ></el-table-column>
      <el-table-column prop="stall.stall_code" label="车位编号" width="100">
      </el-table-column>
      <!-- <el-table-column prop="stall.stall_state" label="车位状态" width="100">
      </el-table-column> -->
      <el-table-column prop="order_vehicle_code" label="车牌号" width="100">
      </el-table-column>
      <el-table-column prop="stall.stall_price" label="车位价格" width="100">
      </el-table-column>
      <el-table-column prop="order_startime"    sortable label="订单开始时间" width="180">
      </el-table-column>
      <el-table-column prop="order_endtime" sortable  label="订单结束时间" width="180">
      </el-table-column>
       <el-table-column prop="order_money" label="金额(元)" width="100">
      </el-table-column>
      
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[3, 5, 10, 15, 20]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
     plateNumber:"", //查询车牌号
     isIndex: true,
     
      pagination: {
        pageIndex: 1,
        pageSize: 3,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pageInfo: {},
      pageSize: 3,
      currentPage: 1,
      dates: [],
    };
  },
  methods: {
    loadOrder() {
      this.$axios
        .post("/getOrdersByUid", {
          pageSize: this.pagination.pageSize,
          currentPage: this. pagination.pageIndex,
          uid: sessionStorage.getItem("userId"),
        })
        .then((res) => {
            console.log(res.data.data.list);
          this.pageInfo = res.data.data;
          this.url = res.data.data.list.photo;
          this.srcList = res.data.data.list.photo;
        })
        .catch((error) => {
          console.log(error);
        });
    },



      typeIndex(index) {
      const tabIndex =
        index + (this.pagination.pageIndex - 1) * this.pagination.pageSize + 1;
      return tabIndex;
    },



    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this. pagination.pageIndex = 1;
      this.loadOrder();
      console.log(`每页 ${val} 条`);
    },


    handleCurrentChange(val) {
      this. pagination.pageIndex = val;
      this.loadOrder();
      console.log(`当前页: ${val}`);
    },


    searchByCondition(){
      if(this.plateNumber==""){
        alert(1);
        this.loadOrder();
      }
       this.$axios
        .post("/getOrdersByUid", {
          pageSize: this.pagination.pageSize,
          currentPage: this. pagination.pageIndex,
          uid: sessionStorage.getItem("userId"),
          stall_code:this.plateNumber
        })
        .then((res) => {
          this.pageInfo = res.data.data;
          this.url = res.data.data.list.photo;
          this.srcList = res.data.data.list.photo;
        })
        .catch((error) => {
          console.log(error);
        });
    }
  },
  mounted() {
      this.loadOrder();
  },
};
</script>

<style scoped>
  .demo-form-inline{
    text-align: right;
    margin-right: 10%;
  }
</style>